<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="stylesheet" th:href="@{/static/element/index.css}"/>
</head>
<body>
<div id="app">
    <template>
        <div style="margin-bottom:18px;">
            <el-input style="width: 13%" v-model="queryForm.ip" placeholder="ip"></el-input>
            <el-input style="width: 13%" v-model="queryForm.port" placeholder="端口"></el-input>
            <el-input style="width: 13%" v-model="queryForm.schema" placeholder="schema"></el-input>
            <el-input style="width: 13%" v-model="queryForm.user" placeholder="用户名"></el-input>
            <el-input style="width: 13%" v-model="queryForm.password" placeholder="密码"></el-input>
            <el-button @click="handleQuery">查询</el-button>
            <el-button v-if="button.export" @click="handleExport">导出</el-button>
        </div>
        <el-table :data="tableData" border ref="multipleTable">
            <el-table-column type="selection" width="40"></el-table-column>
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                        <el-table :data="props.row.columnList" size="mini" :header-cell-style="{background:'#CFD3DA'}" border>
                            <el-table-column prop="columnName" label="字段名"></el-table-column>
                            <el-table-column prop="columnComment" label="备注"></el-table-column>
                            <el-table-column prop="columnType" label="类型"></el-table-column>
                            <el-table-column prop="isNullable" label="是否可为空"></el-table-column>
                            <el-table-column prop="columnKey" label="是否主键"></el-table-column>
                        </el-table>
                    </el-form>
                </template>
            </el-table-column>
            <el-table-column prop="tableName" label="表名"></el-table-column>
            <el-table-column prop="tableComment" label="备注"></el-table-column>
            <el-table-column prop="columnSize" label="字段数量"></el-table-column>
            <el-table-column prop="createTime" label="创建时间"></el-table-column>
        </el-table>
    </template>
</div>
</body>
<script th:src="@{/static/js/axios.min.js}"></script>
<script th:src="@{/static/js/common.js}"></script>
<script th:src="@{/static/js/vue.min.js}"></script>
<script th:src="@{/static/element/index.js}"></script>
<script th:src="@{/static/js/jquery.min.js}"></script>
<script th:src="@{/static/layer/layer.js}"></script>
<script>
    new Vue({
        el: '#app',
        data() {
			return {
                tableData: [],
                button: {
                    export: false
                },
                queryForm: {
                    ip: '',
                    port: '',
                    schema: '',
                    user: '',
                    password: ''
                }
			}
        },
        created() {
            this.handleQuery();
			let sysButtons = JSON.parse(localStorage.getItem("jsbb-sysButtons"));
			this.button.export = sysButtons.indexOf("/tool/table/export") > -1;
        },
        methods: {
            handleQuery() {
                let queryParam = {
                    pageNo:this.currentPage,
                    pageSize:this.pageSize,
                    ip:this.queryForm.ip,
                    port:this.queryForm.port,
                    schema:this.queryForm.schema,
                    user:this.queryForm.user,
                    password:this.queryForm.password
                };
                query('/tool/table/list', queryParam, this);
            },
            handleExport() {
                let selectedRows = this.$refs.multipleTable.selection;
                let tableNameList = selectedRows.map(item => {
                    return item.tableName;
                });
                if (tableNameList.length <= 0) {
                    parent.layer.msg('请选择数据');
                } else {
                    let queryParam = {
                        ip:this.queryForm.ip,
                        port:this.queryForm.port,
                        schema:this.queryForm.schema,
                        user:this.queryForm.user,
                        password:this.queryForm.password,
                        tableNameList:tableNameList
                    };
                    exports('/tool/table/export', queryParam);
                }
            }
        }
    });
</script>
</html>
